import React ,{ useState ,useEffect} from 'react'
import { Button,DatePicker,ConfigProvider,Input  } from 'antd';
import locale from 'antd/locale/zh_CN';
import dayjs from 'dayjs';
import { RollbackOutlined, SearchOutlined } from '@ant-design/icons';
import 'dayjs/locale/zh-cn';
import DataProvider from './DataProvider';
import DynamicPagination from '../components/pages/DynamicPagination';
import axios from 'axios';
import '../css/lzk.css'
axios.defaults.baseURL = 'http://localhost:3000/'
dayjs.locale('zh-cn');
const { RangePicker } = DatePicker;
// const totalRecords = 200; // 假设总记录数为 200
export default function space() {
  let [value,setvalue]=useState()
  const  [dynamicList,setdynamicList] = useState([])
  const  [totalRecords,settotals]=useState()
  const [page,setpage]=useState(1)
  const [pageSize,setpagesize]=useState(2)
    // 定义状态来存储选择的日期范围
    const [dateRange, setDateRange] = useState([]);

    // 处理日期选择变化的函数
    const handleDateChange = (dates) => {
        setDateRange(dates);
    };

    const handlePageChange = (page, pageSize) => {
      setpage(page)
      setpagesize(pageSize)
        // getDynamicList()
    };
    const handleShowSizeChange = (current, size) => {
      // console.log(current,size)
      setpage(current)
      setpagesize(size)
      // getDynamicList()
    // console.log(`当前页码: ${current}, 新的每页显示数量: ${size}`);
};
    const sou = ()=>{
        getDynamicList()
    }
    const getDynamicList = async ()=>{
        const {data:{list,total}} = await axios.get('/kai/getdynamic',{params:{name:value,page:page,pagesize:pageSize,
          startdate:dateRange[0],endate:dateRange[1]}})
        setdynamicList(list)
        settotals(total)
    }
    const qu = ()=>{
        if (value.length > 0) {
            // 截取字符串，去掉最后一个字符
            setvalue(value.slice(0, -1));  
        }
    }
    useEffect(()=>{
        getDynamicList()
    },[page,pageSize,value,dateRange])
    //  useEffect(() => {
    //     getDynamicList();
    // }, [pageSize]);
  return (
     <div style={{
      scrollbarWidth:'none',
      overflowY:'auto',
      margin:'auto',
      width: '70%',
      height: '100%',
    }
    }>
      <div style={{marginTop: '0.6rem',overflow:'hidden',backgroundColor: 'white',width:'100%',height:'24%',borderRadius:'20px'}}>
        <div style={{display:'flex',margin:'0.6rem'}}>
            <div style={{width:'0.16rem',marginTop:'0.1rem',borderRadius:'0.1rem',height:'0.6rem',backgroundColor:'#3dd4a7'}}></div>
            <div style={{fontSize:'0.5rem',marginLeft:'0.2rem'}}>动态管理</div>
        </div>
        <div style={{width:'100%',display:'flex',fontSize:'0.4rem',color:'#999',margin:'1rem 0.6rem'}}>
            <div>发布日期</div> 
            <div style={{margin:'-0.2rem 0.5rem'}}>
                 <ConfigProvider locale={locale}>
                <RangePicker onChange={handleDateChange}  style={{height:'1rem',width:'10rem'}}/>
                </ConfigProvider>
            </div>
            <div style={{margin:'-0.2rem 0.1rem'}}>
                <Input onChange={(e)=>{setvalue(e.target.value)}} value={value} style={{height:'1rem',width:'10rem'}} placeholder="请输入关键字" />
            </div>
            <Button onClick={sou} style={{textAlign:'center',lineHeight:'1rem',margin:'-0.2rem 0.3rem',width:'1rem',height:'1rem',background:'#5adbb5',color:'white',borderRadius:'0.1rem'}} type="primary"  icon={<SearchOutlined />} />
            <Button onClick={qu} style={{textAlign:'center',lineHeight:'1rem',margin:'-0.2rem 0.3rem',width:'1rem',height:'1rem',color:'black'}} type="primary" color='default' variant="outlined" icon={<RollbackOutlined />} />
            {/* <div style={{textAlign:'center',lineHeight:'1.2rem',fontSize:'0.6rem',margin:'-0.2rem 0.3rem',width:'1.2rem',height:'1.2rem',background:'white',color:'block',borderRadius:'0.1rem'}}>
                <RollbackOutlined />
            </div> */}
            
           
        </div>
      </div>
      <div style={{marginTop: '0.6rem',overflow:'hidden',backgroundColor: 'white',width:'100%',marginBottom:'1.25rem',borderRadius:'20px'}}>
        <div style={{margin:'0.5rem 26.4rem',display:'flex'}} >
          <Button style={{marginLeft:'0.5rem',width:'2.4rem',height:'1rem'}} color="default" variant="outlined" >
          批量操作
          </Button>
        </div>
        <div style={{width:'92%',margin:'0 auto',position:'relative'}}>
          <DataProvider dynamicList={dynamicList}></DataProvider>
           <div style={{width:'38%',margin:'0.5rem 17.5rem'}}>
            <DynamicPagination
                style={{position:'absolute',right:'1rem'}}
                pageSize={pageSize}
                total={totalRecords}
                currentPage={page}
                defaultCurrent={page}
                defaultPageSize={pageSize}
                
                showQuickJumper
                onPageChange={handlePageChange}
                onShowSizeChange={handleShowSizeChange}
            />
        </div>
        </div>
      </div>
    </div>
  )
}